<ion-header>
	<ion-navbar>
		<button ion-button menuToggle>
			<!-- <ion-icon name="menu"></ion-icon> -->
			<img class="userPic" src="./assets/imgs/user.png" [src]="userPic">
		</button>
		<ion-title>卡淘淘商城</ion-title>
		<ion-buttons end >
			<button ion-button icon-only (click)="openMassage()" >
				<img class="userPicw" src="./assets/imgs/message_on.png" >
			</button>
		</ion-buttons>


	</ion-navbar>
</ion-header>

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css">

<ion-content class="back249">
	<ion-refresher (ionRefresh)="doRefresh($event)">
		<ion-refresher-content 
		pullingIcon="ios-arrow-down"			
		refreshingSpinner="ios"
		pullingText="松开刷新">


		</ion-refresher-content>
		
	</ion-refresher>
	<div>
		<div class="swiper-container homeBanner homeBanner-container">
			<div class="swiper-wrapper" >
				<div *ngFor="let item of banner" class="swiper-slide" #bannerChild1 (click)="bannerClick(1)" [ngStyle]="{'background': 'url('+item+') no-repeat'}"></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

		</div>
		<div class="site-news" >
			<div class="news ">
				<span>卡淘淘公告&nbsp;&nbsp;</span>
			</div>
			<div class="news-content">
				<div class="swiper-container announcement-container ">

					<div class="swiper-wrapper">
						<div class="swiper-slide announcement" ><span>欢迎来到卡淘淘商城</span></div>
						<!-- <div class="swiper-slide announcement" ><span>欢迎来到卡淘淘商城哦</span></div> -->
					</div>


				</div>
				<!-- <ion-list>
					<ion-item class="announcement">
						<a>
							
						</a>
					</ion-item>
					
				</ion-list> -->
			</div>
		</div>

		<div> 
			<div class="backfff">
				<ion-segment [(ngModel)]="pet" class="home-viewpage" (click)="swipeEvnet($event)">
					<ion-segment-button value="kittens"  id="kittens">
						移动卡
					</ion-segment-button>
					
					<ion-segment-button value="unicom" id="unicom">
						联通卡
					</ion-segment-button>
					<ion-segment-button value="telcom" id="telcom">
						电信卡
					</ion-segment-button>
					<ion-segment-button value="puppies" id="puppies">
						京东卡
					</ion-segment-button>
				</ion-segment>
			</div>

			<div  class="goods-list">

				<ion-slides  (ionSlideWillChange)="slideChanged($event)" >
				
					<ion-slide>
						<div *ngIf="items['mobiles'] == 0">

							<div class="nothing">
								<div class="imgs">
									<img src="./assets/imgs/nothing.png" alt="">
								</div>
								<span>该栏目下为空~~</span>
							</div>



						</div >

						<div *ngIf="items['mobiles'] == 1">
							<ion-list class="first">
								<ion-item class="item" *ngFor=" let item of card['mobiles']">
									<div class="content">
									<div class="goods-img" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
										<img src="{{item.goods_image}}">
									</div>
									<div class="goods-text">
										<div class="title" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
											<span>{{item.goods_name}}</span>

											<span>{{item.zhuanmai_rate}}折</span>
										</div>
										<div class="businessman" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
											<span class="user-name">
												{{item.member_name}}
											</span>
											<span class="state">
												出售中
											</span>

											<span class="goods-stork" >
												还剩{{item.goods_num}}张
											</span>

										</div>
										<div class="footer">
											<span>
												￥{{item.all_price}}
											</span>
											<div class="buttom" (click)="openBuy(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.zhuanmai_rate)">
												<div>
													<span>抢购</span>
												</div>

											</div>
										</div>
									</div>
									</div>
								</ion-item>
							</ion-list>
							<ion-infinite-scroll (ionInfinite)="doInfinite($event,0)" class="home-loading"  *ngIf="items['unicom'] != null">
								<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
								</ion-infinite-scroll-content>
							</ion-infinite-scroll>
							<span class="more"  *ngIf="items['unicom'] == null">
								没有更多商品了~
							</span>
							
						</div>
						
					</ion-slide>
				
					<ion-slide >
						<div *ngIf="items['unicoms'] == 0">

							<div class="nothing">
								<div class="imgs">
									<img src="./assets/imgs/nothing.png" alt="">
								</div>
								<span>该栏目下为空~~</span>
							</div>



						</div >
						<div *ngIf="items['unicoms'] > 0 ">
							<ion-list >
								<ion-item class="item" *ngFor="let item of card['unicoms']">
									<div class="content">
										<div class="goods-img " (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
											<img src="{{item.goods_image}}">
										</div> 
										<div class="goods-text" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)"> 
											<div class="title">
												<span>{{item.goods_name}}</span>
												<span>{{item.zhuanmai_rate}}折</span>
											</div>
											<div class="businessman" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
												<span class="user-name">
													{{item.member_name}}
												</span>
												<span class="state">
													出售中
												</span>
												<span class="goods-stork">
													还剩{{item.goods_num}}张
												</span>
											</div>
											<div class="footer">
												<span>
													￥{{item.all_price}}
												</span>
												<div class="buttom" (click)="openBuy(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.zhuanmai_rate)">
													<div>
														<span>抢购</span>
													</div>
						
												</div>
											</div>
										</div>
									</div>
								</ion-item>
							</ion-list>
							<ion-infinite-scroll (ionInfinite)="doInfinite($event,1)" class="home-loading" *ngIf="items['unicom'] != null">
								<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
								</ion-infinite-scroll-content>
							</ion-infinite-scroll>
							<span class="more"  *ngIf="items['unicom'] == null">
								没有更多商品了~
							</span>
						</div>
						
						
					</ion-slide>
				
					<ion-slide >
						<div *ngIf="items['telcoms'] == 0">

							<div class="nothing">
								<div class="imgs">
									<img src="./assets/imgs/nothing.png" alt="">
								</div>
								<span>该栏目下为空~~</span>
							</div>


						</div >
						<div *ngIf="items['telcoms'] > 0 ">
							<ion-list >
								<ion-item class="item" *ngFor="let item of card['telcoms']">
									<div class="content">
										<div class="goods-img" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
											<img src="{{item.goods_image}}">
										</div>
										<div class="goods-text" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
											<div class="title">
												<span>{{item.goods_name}}</span>
												<span>{{item.zhuanmai_rate}}折</span>
											</div>
											<div class="businessman" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
												<span class="user-name">
													{{item.member_name}}
												</span>
												<span class="state">
													出售中
												</span>
												<span class="goods-stork">
													还剩{{item.goods_num}}张
												</span>
											</div>
											<div class="footer">
												<span>
													￥{{item.all_price}}
												</span>
												<div class="buttom" (click)="openBuy(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.zhuanmai_rate)">
													<div>
														<span>抢购</span>
													</div>
						
												</div>
											</div>
										</div>
									</div>
								</ion-item>
							</ion-list>
							<ion-infinite-scroll (ionInfinite)="doInfinite($event,2)" class="home-loading"  *ngIf="items['unicom'] != null">
								<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
								</ion-infinite-scroll-content>
							</ion-infinite-scroll>
							<span class="more"  *ngIf="items['unicom'] == null">
								没有更多商品了~
							</span>
						</div>
					</ion-slide>

					<ion-slide>
						<div *ngIf="this.items['jds'] == 0">

							<div class="nothing">
								<div class="imgs">
									<img src="./assets/imgs/nothing.png" alt="">
								</div>
								<span>该栏目下为空~~</span>
							</div>



						</div >

						<div *ngIf="items['jds'] >0">
							<ion-list class="first">
								<ion-item class="item" *ngFor=" let item of card['jds']">
									<div class="content">
									<div class="goods-img" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
										<img src="{{item.goods_image}}">
									</div>
									<div class="goods-text">
										<div class="title" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
											<span>{{item.goods_name}}</span>
											<span>{{item.zhuanmai_rate}}折</span>
										</div>
										<div class="businessman" (click)="goodsDetail(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.goods_price,item.zhuanmai_rate,item.type)">
											<span class="user-name">
												{{item.member_name}}
											</span>
											<span class="state">
												出售中
											</span>

											<span class="goods-stork">
												还剩{{item.goods_num}}张
											</span>

										</div>
										<div class="footer">
											<span>
												￥{{item.all_price}}
											</span>
											<div class="buttom" (click)="openBuy(item.goods_num,item.all_price,item.id,item.goods_image,item.member_name,item.goods_name,item.zhuanmai_rate)">
												<div>
													<span>抢购</span>
												</div>

											</div>
										</div>
									</div>
									</div>
								</ion-item>
							</ion-list>
							<ion-infinite-scroll (ionInfinite)="doInfinite($event)" class="home-loading"  *ngIf="items['unicom'] != null">
								<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
								</ion-infinite-scroll-content>
							</ion-infinite-scroll>
							<span class="more"  *ngIf="items['unicom'] == null">
								没有更多商品了~
							</span>
							
						</div>
						
					</ion-slide> 
				
					<!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)" class="home-loading">
						<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
						</ion-infinite-scroll-content>
					</ion-infinite-scroll>-->
				
				</ion-slides>	

			</div>

		</div>
	</div>





</ion-content>
